<template>
    <div>
        <button @click="$emit('decrement')">-1</button>
        <input type="text" v-model.lazy="myCount">
        <button @click="$emit('increment')">+1</button>
    </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
const emit = defineEmits(['decrement', 'increment', 'inputCount']);
const props = defineProps(['count']);

// 方法二
const myCount = computed({
    get() {
        return props.count;
    },
    set(newValue) {
        emit('inputCount', newValue);
    }
})


// 方法一：
// const myCount = ref(props.count);
// // 侦听父组件传递的count
// watch(() => props.count, () => {
//     // 每当父组件传递的数据发生改变，就修改子组件自己的数据
//     myCount.value = props.count;
// })


</script>

<style scoped></style>